
<div class="modal" id="courseModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal_wapper">
        <div class="modal-dialog w-8">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">课程基本信息</h4>
                </div>
                <div class="modal-body">
                    <form role="form" id="courseForm" method="post" action="${base}/mergeCourseSection"  enctype="multipart/form-data">
                        <input type="hidden" name="id" />
                        <div class="form-group clearfix">
                            <label class="control-label">课程封面<span id="imgErrSpan" style="color: red; font-weight: normal;"></span>
                            </label>
                            <div class="col-sm-10">
                                <div class="ui-avatar-box">
                                    <img id="imagePreview" style="display:none;width:150px;height:72px;background-size:contain;">
                                </div>
                                <input type="file" id="file" style="margin-top:3px;">
                                <span style="font-size:12px;">尺寸：365 x 175</span>
                                <input type="hidden" id="coursePicture" name="coursePicture" value="" />
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <label class="control-label" >课程名称</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="name" id="name" placeholder="请输入名称">
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <label class="control-label">所属分类</label>
                            <div class="col-sm-4">
                                <select id="classify" name="classify" class="form-control" >
                                <#if classifyMap??>
                                <#list classifyMap as key, classify>
                                <option value="${key}">${classify.name}</option>
                                </#list>
                                </#if>
                                </select>
                            </div>
                            <label class="control-label">二级分类</label>
                            <div class="col-sm-4">
                                <select id="subClassify" name="subClassify" class="form-control">
                                    <#if classifyMap??>
                                    <#list classifyMap as key, classify>
                                    <#list classify.subClassifyList as item>
                                    <option parentCode="${item.parentCode}" value="${item.code}">${item.name}</option>
                                    </#list>
                                    </#list>
                                    </#if>
                                </select>
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <label class="control-label">难度级别</label>
                            <div class="col-sm-4">
                                <select name="level" class="form-control" type="select">
                                    <option value="1">初级</option>
                                    <option value="2">中级</option>
                                    <option value="3">高级</option>
                                </select>
                            </div>
                            <label class="control-label">推荐权重</label>
                            <div class="col-sm-4">
                                <input type="number" oninput="if(value<0)value=0;if(value>10000)value=10000" name="weight" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <label class="control-label">是否免费</label>
                            <div class="col-sm-4">
                                <select name="free" class="form-control" type="select">
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                            <label class="control-label">价格</label>
                            <div class="col-sm-4">
                                <input type="number" oninput="if(value<0)value=0;if(value>10000)value=10000"  name="price" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <label class="control-label">课程类型</label>
                            <div class="col-sm-4">
                                <select name="type" class="form-control">
                                    <option value="0">录播课</option>
                                    <option value="1">直播课</option>
                                </select>
                            </div>

                            <label class="control-label">直播时间</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" placeholder="请选择日期"
                                       id="livetime" name="livetime" readonly="readonly" style="background-color:#FFF;">
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <label class="control-label" >概述</label>
                            <div class="col-sm-8">
                                <textarea name="brief" rows="3" class="form-control"></textarea>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-primary" onclick="doSave()">保存</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>

            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $('#classify').change(function(){
            let classify = $('#classify').val();
            filterSubClassify(classify);
        })
        //分类过滤一次
        filterSubClassify($('#classify').val());
        //课程图片的监听
        coursePictureFielChange();
        //时间选择插件加载
        laydate.render({
            elem: '#livetime',
            type: 'datetime',
            value: _os.dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss')
        })
    })

    //课程图片改变监听
    function coursePictureFielChange() {
        $('#file').change(function () {
            let f = $('#file').val();
            if(_os.photoValid(f)){
                let file = $('#file').get(0).files[0];
                _os.processImageFile(file,function (result) {
                    $('#imagePreview').show();
                    $('#imagePreview').css('background-image','url('+result.image+')')
                    $('#coursePicture').val(result.data);
                })
            }else{
                Modal.alert("图片格式不正确(.png|.jpg|.jpeg)")
            }
        })
    }
    //过滤课程分类
    function filterSubClassify(classify){
        let flag = true;
        $('#subClassify').find('option').each(function(i,item){
            if($(item).attr('parentCode') == classify){
                if(flag){
                    $('#subClassify').val($(item).attr('value'));
                    flag = false;
                }
                $(item).show();
            }else{
                $(item).hide();
            }
        })
    }

    //保存数据到数据库
    function doSave() {
        $('#courseForm').ajaxSubmit({
            dataType:'json',
            success: function (resp) {
                if(resp.errcode == 0){
                    window.location.reload();
                }else{
                    Modal.alert("保存失败");
                }
            }
        })
    }

</script>

